<script setup lang="ts">
import CdlSearch from "@/components/search";
import CdlTable from "@/components/table";
import {Mode, Query, State} from "@/interfaces/components/Page";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {reactive} from "vue";
import {Shipper} from "@/interfaces/views/vehicle/shipper";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";
import {useRouter} from "vue-router";

const request = {
  createdIsNeed: true,
  url: "/slag-truck/shipper",
}
const router = useRouter()
const state = reactive<State<Query<Shipper>, Shipper>>({
  queryForm: {},
  dataList: []
})
const {query, loading} = useTablePagingTemplate(request, state)

const searTree: FormTree<Shipper> = [
    [
      {label: "托运人姓名", component: "input"},
      {label: "托运人全称", component: "input"},
    ]
]
const tree: TableTree<Shipper> = {
  colRule: [
    {ti: "托运联系人姓名", prop: "contact"},
    {ti: "托运联系人手机号", prop: "mobile"},
    {ti: "托运人全称", prop: "name"},
    {ti: "法人姓名", prop: "legalPerson"},
    {ti: "法人联系方式", prop: "legalPersonPhone"},
    {ti: "信用代码或个人证件号", prop: "idNum", width: 210},
    {ti: "认证状态", prop: "status", dict: "shipper_status"},
    {ti: "企业通信地址", prop: "address"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: jumpShipperDetail, auth: "vehicle:shipper:info"}
  ]
}

/**
 * 跳转查看详情
 * @param id
 */
function jumpShipperDetail(id: string | number){
  router.push({
    path: "/vehicleManage/shipper/shipperDetails",
    query: {
      id: id
    }
  })
}

/**
 * 托运人新增
 */
function jumpShipperInsert(){
  router.push({
    path: "/vehicleManage/shipper/createAndModifyShipper"
  })
}
/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){

}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="primary" @click="jumpShipperInsert" v-auth="'vehicle:shipper:save'">新增</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList" v-loading="loading"></CdlTable>
  </el-card>
</template>
